import { getTabConfig } from "@/utils/ui/tabs";
import { useTabStore } from "@/stores/modules/tabs";
import { useSettingStore } from "@/stores/modules/setting";
// 通用函数
export function useCommon() {
  const tabStore = useTabStore();
  const settingStore = useSettingStore();
  const { showTabViews, tabStyle } = storeToRefs(tabStore);

  // 是否是前端控制模式
  const isFrontendMode = computed(() => {
    return import.meta.env.VITE_ACCESS_MODE === "frontend";
  });

  // 刷新页面
  const refresh = () => {
    settingStore.reload();
  };

  // 回到顶部
  const scrollToTop = () => {
    window.scrollTo({ top: 0 });
  };

  // 页面最小高度
  const containerMinHeight = computed(() => {
    const { openHeight, closeHeight } = getTabConfig(tabStyle.value);
    return `calc(100vh - ${showTabViews.value ? openHeight : closeHeight}px)`;
  });

  // 设置容器高度CSS变量
  const setContainerHeightCssVar = () => {
    const height = containerMinHeight.value;
    document.documentElement.style.setProperty("--rome-full-height", height);
  };

  // 监听容器高度变化并更新CSS变量
  watchEffect(() => {
    setContainerHeightCssVar();
  });

  return {
    isFrontendMode,
    refresh,
    scrollToTop,
    containerMinHeight,
    setContainerHeightCssVar,
  };
}
